window.onload=function(){
  let menu = document.querySelector('#carousel');
  let left = document.querySelector('#carousel_controller_left');
  let right= document.querySelector('#carousel_controller_right');
  let imgs  = Array.from(document.querySelectorAll('#carousel_image_container>li')) ;
  let img  = document.querySelector('#carousel_image_container') ;
  let li  =Array.from( document.querySelectorAll('#carousel_li_container>li'));
  var picIndex=0;
  let picWidth = menu.offsetWidth;
  function event(){
     if(picIndex == li.length-1){
       picIndex=-1;
   }
   picIndex++;
  //  console.log(picIndex);
 
   li.forEach((elm)=>{
   elm.classList.remove('active');
   });
     li[picIndex].classList.add('active');
     img.style.left=(-picIndex*picWidth)+'px';
     }
   li[0].className = "active";
  li.forEach((el,i)=>{
    el.setAttribute('index',i)
       el.onmouseover=function(){
         li.forEach((elm)=>{
           elm.classList.remove('active');
         })
         this.classList.add('active');
         picIndex = li.indexOf(this);
         // console.log(picIndex);
        img.style.left= (-picIndex*picWidth)+'px';
       }
  })
  left.onclick=function(){
    if(picIndex==0){
      picIndex=li.length;
    }
    picIndex--;
    li.forEach((elm)=>{
    elm.classList.remove('active');
    });
     li[picIndex].classList.add('active');
     img.style.left=(-picIndex*picWidth)+'px';
  }
  right.onclick=function(){
      event();
  }
  let timer = setInterval(()=>{
  event();
  },1000)
     menu.onmouseover=function(){
    clearInterval(timer)
  }
   menu.onmouseout=function(){
 timer = setInterval(()=>{
   event();
 },1000)
}


let daojishi = document.querySelector('#daojishi');  
// console.log(daojishi);
let tim = setInterval(()=>{  
let b = new Date();  
let c = new Date(2022,6,30,0,0,0);  
let a = c-b;  
let s =(parseInt((a/1000)%60));  
s = s>9?s:'&nbsp;'+s;
let m= (parseInt(a/(60*1000)%60));  
m =  m>9? m:'&nbsp;'+m;
let h = (parseInt(a/(60*60*1000)%24));  
h =  h>9? h:'&nbsp;'+h;

let d =(parseInt(a/(60*60*24*1000)));  
d =  d>9? d:'&nbsp;'+d;

daojishi.innerHTML =`<span style="color:black">${d}</span><span>${h}</span><span>${m}</span><span>${s}</span>`;
 },1000)
}
